<template>
    <div id="app">
        <el-container v-if="$route.meta.keepAlive">
            <el-header>
                <Header></Header>
            </el-header>
            <el-container>
                <el-aside>
                    <Aside></Aside>
                </el-aside>
                <el-main>
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </el-main>
            </el-container>
        </el-container>
        <router-view v-if="!$route.meta.keepAlive" name="login"></router-view>
    </div>
</template>

<script>
    import Aside from "@/components/layout/Aside.vue";
    import Header from "@/components/layout/Header.vue";
    // import {mapState} from 'vuex'

    export default {
        name: "App",
        components: {Aside, Header},
        data() {
            return {
                activeIndex: '1'
            };
        },
        methods: {
            handleOpen(index, indexPath) {
                console.log("{event:open," + "index:" + index + ",indexPath:" + indexPath + "}");
            },
            handleClose(index, indexPath) {
                console.log("{event:close," + "index:" + index + ",indexPath:" + indexPath + "}");
            },
            handleSelect(index, indexPath) {
                console.log("{event:select," + "index:" + index + ",indexPath:" + indexPath + "}");
            }
        }
        // computed: {
        //     ...mapState({
        //         isCollapse: state => state.isCollapse
        //     })
        // }
    }
</script>

<style scoped lang="stylus">
</style>